<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>默认的视口是 980px</h1>
    <p>默认的视口是为了解决传统的pc端的网页在移动端浏览器的时候出现滚动条的效果，为了解决这个问题，乔布斯引入视口虚拟层，大小为 980px，然后让pc端网页在980px里面显示，这个时候不会出现滚动条。但是视口是虚拟出来，最终还是要收到我们屏幕的设备独立像素的限制，限制在设备独立像素里面，所以这个视口会进行缩小显示，最后我们看到的网页就缩小了。这个时候的用户体验就变为了通过手指进行捏合操作进行方法和缩小，相比之前的滚动条好很多。 可以在浏览器的控制台通知 window.visualViewport 可以看到缩放比</p>
    <p>
        虽说这样可以解决问题，但是随着移动互联网的兴起，出现了专门针对移动的设计（针对设备独立像素设计），那么这个时候传统的视口就不合适。那么这个时候我们的视口应该为设备的独立像素进行呈现，那么是1:1的还原设计稿，这样是最完美的。
    </p>
</body>
<script type="text/javascript">

</script>

</html>
